import React, { useEffect, useState } from 'react'
import { Form, Input, Button,} from 'antd';
import { message,Row,Col } from 'antd';
import { PhoneOutlined,WhatsAppOutlined } from '@ant-design/icons';
import {Link,useLocation,useNavigate} from 'react-router-dom'
import './lgName.scss'
import { reg } from '../../utils/validate';
import { ajax } from '../../api';
export default function LoginPhone() {
  return (
    <div className='loginName'>
        <Demo></Demo>
    </div>
    
  )
}
const Demo = () => {
    const [form] = Form.useForm()
    const navigate =  useNavigate()
    const onFinish = async (values: any) => {
        console.log(values);
        let res=await ajax.checkWord(values)
        console.log(res);
        if(res.code==200){
          sessionStorage.setItem('token',res.token)
          localStorage.setItem('phone',values.phone)
          navigate('/home/mine')
        }
        
        
    };
  
    const onFinishFailed = (errorInfo: any) => {
        message.error('请输入正确的表单信息');
    };
    let [flag,setFlag]=useState<boolean>(true)
    let [count,setCount]=useState<number>(120)
    const [disabled,setDisabled] = useState<boolean>(true)
    //定时器
    let timer:any=null
    const timeDown=()=>{
        timer=setInterval(()=>{
          if(count>0){
            setCount(--count)
          }
          else{
            clearInterval(timer)
            timer=null
            setFlag(true)
            setCount(120)
          }
        },1000)
      }
    const changeFlag=()=>{
        console.log(form);
        //发送验证码判断是否有电话号码
        ajax.findOne({
          phone:form.getFieldValue('phone')
        }).then(result=>{
          if(result.result){
            console.log(result);
          }
          
        })
        
        setFlag(false)
        timeDown()
    }
    const location=useLocation()
      useEffect(()=>{
        console.log(form);
        let phone=new URLSearchParams(location.search).get('phone')
        console.log(phone);
        if(phone){
          form.setFieldsValue({
            phone
          })
          setDisabled(!reg.phone.test(phone))
        }
        return ()=>{
          clearInterval(timer)
          timer = null 
          setCount(120)
          setFlag(true)
        }
      },[])
      //触发change事件
      const changePhone=()=>{
        var phone = form.getFieldValue('phone')
        // console.log(phone);
        setDisabled(!reg.phone.test(phone))
        
      }


  
    return (
      <Form
        name="basic"
        labelCol={{ span: 8 }}
        wrapperCol={{ span: 16 }}
        initialValues={{ remember: true }}
        onFinish={onFinish}
        onFinishFailed={onFinishFailed}
        autoComplete="off"
        form={form}
      >
       <Form.Item
        label="电话号码"
        name="phone"
        rules={[{ required: true, message: '手机号不能为空' },{pattern:reg.phone,message:"请输入正确的手机号格式"}]}

      >
        <Input 
        onChange={changePhone}
         prefix={<PhoneOutlined className="site-form-item-icon" />}
         placeholder="请输入电话号码"
         allowClear
        />
      </Form.Item>
      <Form.Item
        label="验证码"
        name="captcha"
        rules={[{ required: true, message: '验证码不能为空' }, {
          pattern:reg.code,message:'请输入长度为4位的验证码'
        }]}
      >
           <Row>
            <Col span={11}>
            <Input 
            prefix={<WhatsAppOutlined className="site-form-item-icon" />}
            placeholder="请输入验证码"
            />
            </Col>      
            <Col span={11} offset={2} onClick={changeFlag}>
            {
                flag?<Button type="primary"  block  style={{width:"100%"}} disabled={disabled}>
                获取验证码
            </Button>:
            <Button disabled block  style={{width:"100%"}}>
                剩余{count}S
            </Button>
            }
            </Col>
        </Row>
       
      </Form.Item>
      
        <Form.Item
         labelCol={{ span: 0 }}
         wrapperCol={{ offset:8,span: 16 }}
         style={{color:'#fff',display:"flex",justifyContent:'space-between'}}
        >
          <Link to="/register">没有账号，前往注册</Link >
          <Link to="/forgetPass">忘记密码</Link >
        </Form.Item>
  
  
        <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
            
            <Button type="primary" htmlType="submit" block style={{width:"100%"}}>
                登录
            </Button>
          
        </Form.Item>
      </Form>
    );
  };